<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-08-03 16:49:32
 * @LastEditTime: 2019-08-26 17:47:37
 * @LastEditors: Please set LastEditors
 -->
<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	
	<meta name="viewport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>Hello APP</title>
	<link rel="stylesheet" type="text/css" href="../../css/vant.css">
	<link rel="stylesheet" type="text/css" href="../../css/base.css" />
	<script type="text/javascript" src="../../script/jquery.js"></script>
	<script type="text/javascript" src="../../script/layer/mobile/layer.js"></script>
	<script type="text/javascript" src="../../script/vue.min.js"></script>
	<script type="text/javascript" src="../../script/vant.min.js"></script>
	<script type="text/javascript" src="../../script/fastclick.js"></script>
	<script type="text/javascript" src="../../script/base.js"></script>
	<style type="text/css">
		.van-search {
			/* background: transparent !important; */
			padding: 6px 0;
			border-bottom: 1px solid #ebedf0;
		}

		.van-cell__value {
			text-align: right;
		}

		/* .van-search__content {
			background: transparent
		} */

		.van-search__action {
			color: #cd1b21;
			font-size: 13px;
			font-weight: 700;
		}

		.result {
			position: absolute;
			left: 0;
			top: 47px;
			bottom: 0;
			width: 100%;
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;
		}

		.van-cell__title {
			max-width: none;
		}

		.p .van-cell__value {
			text-align: right;
		}


		.p .label {
			line-height: 22px;
			text-align: center;
			font-weight: 500;
			font-size: 13px;
		}

		.p .label .label-value {
			color: #3a3a3a;
			font-size: 14px;
		}

		.p .border {
			border-left: 1px solid #ebedf0;
			border-right: 1px solid #ebedf0;
		}

		.row-name {
			display: inline-block;
			width: 180px;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			vertical-align: middle;
		}

		.edit .van-field__control{
			text-align: right;
		}
	</style>
</head>

<body>
	<div id="app" v-cloak>
		<div class="init-full">
			<van-nav-bar class="head" title="筛选" left-arrow @click-left="onClickLeft"></van-nav-bar>
			<div class="body-with-bottom">
				<div class="content">
					<div>
						<form action="">
							<van-search v-model="filterData.S_Cont" placeholder="请输入搜索关键词" show-action
								@search="getSearchList" v-on:input="getSearchList">
								<div slot="action" @click="getSearchList">查询</div>
							</van-search>
						</form>
					</div>
					<div class="result">
						<div class="p">
							<van-cell v-for="row in filterResult" :title="row.name" clickable @click="selectRow(row)"></van-cell>
						</div>

					</div>

				</div>
				<van-loading v-if="showLoading" />
			</div>
			<div class="bottom">
				<div class="bottom-left-label" @click="showFinal">
					<span>共计{{selectArray.length}}个账户</span>
				</div>
				<div class="bottom-right-button">
					<van-button  type="primary" block  @click="selectArrayConfirm">确定</van-button>
				</div>
			</div>



			<van-popup v-model="isEditNum" round position="bottom">
				<div class="edit">
					<van-cell :title="selectData.name"></van-cell>
					<van-cell title="编号" :value="selectData.code"></van-cell>
					<van-field label="收款金额" v-model="selectData.price" placeholder="请输入收款金额"></van-field>

				</div>
				<div class="btn-padding">
					<van-button type="primary" block @click="selectConfirm">确定</van-button>
				</div>
			</van-popup>

			<van-popup v-model="isShowFinal" round position="bottom">
				<div>
					<van-cell v-for="(row,index) in selectArray">
						<div slot="title">
							<div class="row-name">{{selectData.name}}</div>
							<span>{{selectData.price}}</span>
						</div>
						<div slot="right-icon" @click="deleteRow(row,index)">
							<van-icon name="delete" color="#cd1b21" size="20" style="vertical-align: middle;">
							</van-icon>
						</div>
					</van-cell>

				</div>
			</van-popup>
		</div>
	</div>
</body>

<script type="text/javascript">
	var vm;
	apiready = function () {
		//$('.init-full').show();
		var filterData = api.pageParam.filterData;
		var type = api.pageParam.type;
		vm = new Vue({
			el: '#app',
			data: {
				showLoading: false,
				filterData: filterData,
				filterResult: [],
				isEditNum: false,
				selectData: [],
				selectArray: [],
				isShowFinal: false
			},
			created: function () {
				this.getSearchList();
			},
			methods: {
				getSearchList() {
					var that = this;
					that.showLoading = true;
					FLD.ajax('AP_BasList', that.filterData, function (res) {
						that.showLoading = false;
						for(var i in res.ds){
							res.ds[i].price = '';
						}
						that.filterResult = res.ds;
					})
				},
				selectRow(row) {
					var x = 0;
					for (var i in this.selectArray) {
						if (this.selectArray[i].id == row.id) {
							x = 1;
							this.selectData = JSON.parse(JSON.stringify(this.selectArray[i]));
							this.isEditNum = true;
						}
					}
					if (x == 0) {
						var new_row = JSON.parse(JSON.stringify(row));
						this.selectData = new_row;
						this.isEditNum = true;
					}

				},
				selectConfirm() {
					if(!this.selectData.price){
						layer.open({
							content: '请填写正确的收款金额!',
							skin: 'msg',
							time: 2
						});
						return false;
					}
					var x = 0;
					for (var i in this.selectArray) {
						if (this.selectArray[i].id == this.selectData.id) {
							x = 1;
							this.selectArray[i] = JSON.parse(JSON.stringify(this.selectData));
							this.isEditNum = false;
						}
					}
					if (x == 0) {
						this.selectArray.push(JSON.parse(JSON.stringify(this.selectData)))
						this.isEditNum = false;
					}
				},
				showFinal() {
					if (this.selectArray.length) {
						this.isShowFinal = true;
					} else {
						layer.open({
							content: '您还未选择账户!',
							skin: 'msg',
							time: 2
						});
					}

				},
				deleteRow(row, index) {
					this.selectArray.splice(index, 1);
					if (this.selectArray.length == 0) {
						this.isShowFinal = false;
					}
				},
				selectArrayConfirm() {
					api.sendEvent({
						name: 'selectArray',
						extra: {
							array: this.selectArray,
							selectType: filterData.S_Type,
							type: type
						}
					});
					api.closeWin();
				},
				onClickLeft() {
					api.closeWin();
				}
			}
		})
	};
</script>

</html>
